<template>
	<view class="gal-body">
		<view style="margin-top:50rpx;">
			<text class="gal-block-text gal-h4 gal-color-gray">渐变动画背景</text>
		</view>
		<view class="gal-margin-top">
			<gal-animate-bg 
			:bgColors="background">
				<view class="demo gal-text-center">
					<text class="demo-title">www.GraceUI.com</text>
				</view>
			</gal-animate-bg>
		</view>
		<view
		class="gal-flex gal-rows gal-nowrap gal-justify-content-center gal-align-items-center gal-margin-top-large" 
		hover-class="gal-tap">
			<text class="gal-color-gray gal-text gal-icons" 
			@tap="changeBG">点击这里更换背景</text>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			background : '-45deg, #9055FF, #13E2DA  , #6699FF, #0B63F6'
		}
	},
	methods: {
		changeBG : function () {
			this.background = '-45deg, #E233FF , #FF6B00, #FF0076, #590FB7';
		}
	}
}
</script>
<style>
.demo{width:100%; height:300rpx;}
.demo-title{font-size:50rpx; line-height:300rpx; color:#FFFFFF;}
</style>
